<template>
	<view class="tabbar">
		<view class="tabbar-content">
			<!-- 首页 -->
			<view class="tabbar-item" @click="bindHome">
				<icon class="icon-home" :class="{ 'icon-home-active': path === 'home' }"></icon>
				<text class="text" :class="{ 'text-active': path === 'home' }">首页</text>
			</view>
			<!-- 发布信息 -->
			<view class="release-msg" @click="releaseMsg"></view>
			<!-- 我的 -->
			<view class="tabbar-item" @click="bindMy">
				<icon class="icon-my" :class="{ 'icon-my-active': path === 'my' }"></icon>
				<text class="text" :class="{ 'text-active': path === 'my' }">我的</text>
			</view>
		</view>
		<view class="tabbar-bottom"></view>
	</view>
</template>

<script>
export default {
	props: {
		path: {
			type: String,
			default: ''
		}
	},
	data() {
		return {};
	},
	methods: {
		// 跳转首页
		bindHome() {
			if (this.path === 'my') {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		},
		// 跳转我的
		bindMy() {
			if (this.path === 'home') {
				uni.reLaunch({
					url: '/pages/my/my'
				});
			}
		},
		// 发布信息
		releaseMsg() {
			this.$emit('release')
		}
	},
	onLoad() {}
};
</script>

<style scoped lang="scss">
.tabbar-content {
	width: 100%;
	height: 120rpx;
	background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/index-tabbar-bg1.png) no-repeat;
	background-size: cover;
	padding: 32rpx 120rpx 0;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	position: relative;
	.tabbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		.icon-home {
			width: 52rpx;
			height: 50rpx;
			background: url(images/icon-home.png) no-repeat;
			background-size: cover;
		}
		.icon-home-active {
			background: url(images/icon-home-active.png) no-repeat;
			background-size: cover;
		}
		.icon-my {
			width: 52rpx;
			height: 50rpx;
			background: url(images/icon-my.png) no-repeat;
			background-size: cover;
		}
		.icon-my-active {
			background: url(images/icon-my-active.png) no-repeat;
			background-size: cover;
		}
		.text {
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #262626;
			margin-top: 4rpx;
		}
		.text-active {
			color: #fe7172;
		}
	}
	.release-msg {
		width: 110rpx;
		height: 108rpx;
		background: url(images/release-img.png) no-repeat;
		background-size: cover;
		position: absolute;
		top: -54rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
.tabbar-bottom{
	height: 40rpx;
	width: 100%;
	background: #FFFFFF;
}
</style>
